<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Cloum 图表</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #f3f3f3;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script>
</head>
<body>
<h1>Cloum 图表</h1>
<canvas id="cloumChart" width="800" height="400"></canvas>
<div id="main1" style="width: 600px;height:400px;"></div>
<script>
    // 获取canvas元素
    const canvas = document.getElementById('cloumChart');
    const ctx = canvas.getContext('2d');

    // 使用Ajax获取数据
    function fetchData() {
        const xhr = new XMLHttpRequest();
        console.log("--------------------------------------------")
        xhr.open('GET', '${ctx}/dept/employees/listColumnData', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                console.log(data);
                drawChart(data);
            }
        };
        xhr.send();
    }

    // 绘制柱状图
    function drawChart(data) {
        // 提取total_score值
        const scores = data.map(item => item.total_score);
        // 提取affiliated_unit值作为x轴标签
        const labels = data.map(item => item.affiliated_unit);

        // 设置柱状图的参数
        const numBars = scores.length;
        const totalBarWidth = numBars * 50; // 每个柱子的宽度为50
        const totalSpacing = (numBars - 1) * 20; // 柱子之间的间距为20
        const totalWidth = totalBarWidth + totalSpacing;
        const startX = (canvas.width - totalWidth) / 2; // 计算起始x坐标以居中显示
        const barWidth = 50; // 每个柱子的宽度
        const barSpacing = 20; // 柱子之间的间距
        const maxBarHeight = canvas.height - 50; // 柱子的最大高度
        const maxValue = Math.max(...scores); // 数据中的最大值

        // 绘制柱状图
        scores.forEach((value, index) => {
            const barHeight = (value / maxValue) * maxBarHeight; // 计算柱子的高度
            const x = startX + index * (barWidth + barSpacing); // 计算柱子的x坐标
            const y = canvas.height - barHeight - 25; // 计算柱子的y坐标

            // 绘制柱子
            ctx.fillStyle = 'blue';
            ctx.fillRect(x, y, barWidth, barHeight);

            // 绘制柱子上的数值
            ctx.fillStyle = 'black';
            ctx.font = '14px Arial';
            ctx.fillText(value, x + barWidth / 2 - 10, y - 5);
        });

        // 绘制x轴和y轴
        ctx.beginPath();
        ctx.moveTo(startX, canvas.height - 25);
        ctx.lineTo(startX + totalWidth, canvas.height - 25);
        ctx.moveTo(startX, canvas.height - 25);
        ctx.lineTo(startX, 25);
        ctx.stroke();

        // 绘制x轴标签
        labels.forEach((label, index) => {
            const x = startX + index * (barWidth + barSpacing) + barWidth / 2 - 10;
            ctx.fillText(label, x, canvas.height - 10);
        });
    }

    // 调用fetchData函数获取数据并绘制图表
    fetchData();






    // 使用Ajax获取数据
    function fetchData1() {
        const xhr = new XMLHttpRequest();
        console.log("--------------------------------------------")
        xhr.open('GET', '${ctx}/dept/employees/listZheXianData', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const data = JSON.parse(xhr.responseText);
                console.log(data);
                drawZX(data);
            }
        };
        xhr.send();
    }
        function drawZX(data){
            const categories = data.map(item => item.affiliated_unit);

            // 提取总分（Y 轴数据）
            const values = data.map(item => item.count_above_80);

            // 绘制折线图
            function drawZX(categories, values) {
                const myChart1 = echarts.init(document.getElementById("main1")); // 初始化 ECharts 实例

                // 配置项
                const option = {
                    title: {
                        text: '部门总分折线图', // 图表标题
                        left: 'center' // 标题居中
                    },
                    tooltip: {
                        trigger: 'axis' // 提示框，触发方式为坐标轴
                    },
                    xAxis: {
                        type: 'category', // 类目轴
                        data: categories // 绑定部门名称
                    },
                    yAxis: {
                        type: 'value' // 数值轴
                    },
                    series: [
                        {
                            name: '总分', // 系列名称
                            type: 'line', // 折线图
                            data: values, // 绑定总分数据
                            label: {
                                show: true, // 显示数据标签
                                position: 'top' // 数据标签显示在折线上方
                            }
                        }
                    ]
                };

                myChart1.setOption(option); // 设置配置项
            }

            // 调用函数
            drawZX(categories, values);
        }

    fetchData1();


</script>
</body>
</html>